Чередующиеся строки в таблице

Vlad · January 13, 2008

Написал небольшой скрипт, который в любой таблице поочередно меняет цвет строки: светлая, темная, светлая, темная...

Посмотрите на предмет правильности описания и возможных ошибок.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Чередующиеся строки</title>
<script type="text/javascript">
zebraTable = function() {

// Получаем массив всех таблиц на странице
 tables = document.getElementsByTagName("table");

// Пробегаемся по массиву таблиц
  for (i = 0; i < tables.length; i++) {

// Если у таблицы стоит class="zebra", то делаем чередующиеся строки
	if (tables[i].className == "zebra") {

// Получаем массив всех строк в нужной таблице
	  tr = document.getElementsByTagName("tr");

// Пробегаемся по всем строкам таблицы
	  for (j = 0; j < tr.length; j++) {

// Для нечетных строк устанавливаем class="odd"
	   if (j%2) tr[j].className = "odd";
	  }
	}
  }
}	
window.onload = zebraTable;
</script>
<style type="text/css">
table.zebra {
  width: 100%; /* Ширина таблицы */
  border-collapse: collapse; /* Убираем двойные линии между ячеек */
}

table.zebra td {
  padding: 4px; /* Поля в ячейках */
  border: 1px solid #666; /* Граница между ячеек */
}

table.zebra thead {
  background: #fc0; /* Цвет фона заголовка */
}

table.zebra tbody tr {
  background: #f0f0f0; /* Цвет фона четных строк */
} 
table.zebra tbody tr.odd {
  background: #ccc; /* Цвет фона нечетных строк */
}
</style>
</head>
<body>
<table class="zebra">
 <thead>
  <tr><td>Место</td><td>Оценка</td><td>Фильм</td><td>Год выпуска</td></tr>
 </thead> 
 <tbody>
  <tr><td>1</td><td>9.1</td><td>Крестный отец</td><td>1072</td></tr>
  <tr><td>2</td><td>9.1</td><td>Побег из Шоушенка</td><td>1994</td></tr>
  <tr><td>3</td><td>9.0</td><td>Крестный отец 2</td><td>1974</td></tr>
  <tr><td>4</td><td>8.9</td><td>Хороший, плохой, злой</td><td>1966</td></tr>
  <tr><td>5</td><td>8.8</td><td>Криминальное чтиво</td><td>1994</td></tr>
  <tr><td>6</td><td>8.8</td><td>Список Шиндлера</td><td>1993</td></tr>
  <tr><td>7</td><td>8.8</td><td>Звездные войны: эпизод 5</td><td>1980</td></tr>
  <tr><td>8</td><td>8.8</td><td>Полет над гнездом кукушки</td><td>1975</td></tr>
  <tr><td>9</td><td>8.8</td><td>Касабланка</td><td>1942</td></tr>
  <tr><td>10</td><td>8.8</td><td>Семь самураев</td><td>1954</td></tr>
</tbody> 
</table>
</body>
</html>

WingedFox · January 13, 2008

1.

zebraTable = function() {

имеет смысл заменить на

function zebraTable () {

Тогда функция будет доступна с момента парсинга скрипта, а не исполнения этой строчки.

2. Какая-то беда произошла, что var вымер?

3. Имеет смысл бегать по .rows.

4. В цикле если не меняется количество элементов в массиве/коллекции, лучше не провоцировать IE и определять количество итераций вне цикла. В противном случае скрипт будет бегать раза в 3-4 медленнее.

5. Имеет смысл ч?тным строкам явно вешать "even".

6. Желательно определиться, где же будут строчки раскрашены: только в tbody или во всей таблице. И поправить либо скрипт, либо CSS.

AKS · January 15, 2008

Тема натолкнула на мысль проверить новую (революционную) Opera 9.5b на предмет поддержки струкрурных селекторов. Сейчас, наконец-то, добрался до этой версии, и проверка принесла положительный результат. Opera 9.5b позволяет весь сценарий заменить одной строчкой:

table.zebra tbody tr:nth-child(odd) {
 background:#ccc;
}

Очень мило, поскольку таким образом еще и динамически добавляемые ряды будут получать соответствующее оформление.

Emm · January 15, 2008

Очень мило

... теперь сделайте чудо... растворите в пространстве времен все браузеры не поддерживающие революционные идеи, и вы войдете в историю как великий маг всех времен и народов, могучий AKS CopperfielD

strix · January 15, 2008

продолжу увлекательное обсуждение. я люблю jquery и советую всем присмотреться к нему

посмотрите примерчик

<html>
 <head>
 <script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript">
 $(document).ready(function(){
 $(".stripe tr").mouseover(function(){$(this).addClass("over");});
 $(".stripe tr").mouseout(function(){$(this).removeClass("over");});
 $(".stripe tr:even").addClass("alt");
 });

 </script>
 <style type="text/css">
 table.stripe td, table.stripe th{
 padding:4px; 
 }
 tr.alt td{background:#ecf6fc}
 tr.alt th{background:#CCD4D9;border-right:1px solid #fff}
 tr.over td{background:#bcd4ec}
 </style>
 </head>
 <body>
<table class="stripe" cellspacing="0">
 <tr>
 <th>#</th>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Company</th>
 <th>Phone</th>
 </tr>
 <tr>
 <td>1</td>
 <td>Lorem</td>
 <td>Ipsum</td>
 <td>InterF</td>
 <td>8 044 254 25 25</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Doloren</td>
 <td>Mirty</td>
 <td>Kioft</td>
 <td>8 044 144 25 25</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Proin</td>
 <td>Curabitur </td>
 <td>Biverra</td>
 <td>8 044 144 25 25</td>
 </tr>
 <tr>
 <td>4</td>
 <td>Lorem</td>
 <td>Ipsum</td>
 <td>InterF</td>
 <td>8 044 254 25 25</td>
 </tr>
 <tr>
 <td>5</td>
 <td>Doloren</td>
 <td>Mirty</td>
 <td>Kioft</td>
 <td>8 044 144 25 25</td>
 </tr>
 <tr>
 <td>6</td>
 <td>Proin</td>
 <td>Curabitur </td>
 <td>Biverra</td>
 <td>8 044 144 25 25</td>
 </tr>
</table>
 </body>
 </html>

в н?м реализация подсветки строк занимает аж одну строку

$(".stripe tr:even").addClass("alt");

плюс прикольный ээфект подсветки строки по наведению курсора

Vlad · January 15, 2008

Спокойно, все браузеры поддерживают революционные идеи. Здесь каждый сможет привести фишку, которая работает в одном браузере и не поддерживается остальными.

nth-child это, кстати, идея CSS3, так что возможно появится и в других браузерах - IE8 и FF3.

LokiDi L0ck · January 15, 2008

 $(".stripe tr").mouseover(function(){$(this).addClass("over");});
 $(".stripe tr").mouseout(function(){$(this).removeClass("over");});

2strix, как небрежно. А если у меня будет 2000 строк, то вместе с этим появится 4000 обработчиков (в то время когда разумнее поставить всего два (!)). Может вы и любите jquery, но вопросы простейшей оптимизации для вас пока открыты.

Emm · January 15, 2008

возможно появится и в других браузерах - IE8

IE8 - I8Э еще седьмой толком не вышел ...

AKS · January 15, 2008

я люблю jquery и советую всем присмотреться к нему
...
в н?м реализация подсветки строк занимает аж одну строку

"Аж одну строку" плюс 3383 строки (jquery 1.2.2)!

Кстати, если "присмотреться к нему" (к jquery), то можно увидеть такое (буду без устали цитировать David Mark'а , пока этот фрагмент не будет исправлен):

// 1102 строка в jquery 1.2.2
 if ( typeof array != "array" ) // тип "array" !!!!!!!!!!!
 for ( var i = 0, length = array.length; i < length; i++ )
 ret.push( array[ i ] );
 else
 ret = array.slice( 0 );

Эта грубейшая ошибка (и многое другое) обсуждалось вот в этой теме.

Dimitry Wolotko · January 15, 2008

А по нему ещ? книги пишут, эх.

Maslakoff · January 16, 2008

Vlad, помойму тема уже обсуждалась -) Как сделать из таблицы зебру

s0rr0w · January 22, 2008

Написал небольшой скрипт, который в любой таблице поочередно меняет цвет строки: светлая, темная, светлая, темная...
Посмотрите на предмет правильности описания и возможных ошибок.

Самое первое же, что бросается в глаза, это непосредственное присваивание и сравнение имени класса.

Что будет, если таблица будет иметь два класса? А что будет, если какая-то из строк таблицы будет тоже иметь предустановленный стиль?

Еще один момент. Некоторые строки могут иметь display: none, что в итоге будет давать ошибку черезполосицы.

s0rr0w · January 22, 2008

1.Тогда функция будет доступна с момента парсинга скрипта, а не исполнения этой строчки.

Нет особой разницы. Оба варианта нормальные.

2. Какая-то беда произошла, что var вымер?

+1 за исключением определения функции, там он не обязателен.

3. Имеет смысл бегать по .rows.

Нет особого смысла. Коллекция тоже вполне работоспособна, пока не выполнится скрипт, коллекция будет считаться статичной.

AKS · January 22, 2008

Нет особой разницы. Оба варианта нормальные.

1. Алгоритм создания и идентификации именованной функции описан в ECMAScript Language Specification. Не пытаясь описать своими словами вариант, который Вы считаете идентичным, просто укажите раздел спецификации, описывающий этот "нормальный" вариант.

2. Известно ли Вам мнение разработчиков JavaScript 2.0 насчет подобного синтаксиса, и будет ли подобный код поддерживаться на платформах будущего?

за исключением определения функции, там он не обязателен.

Любой профессиональный программист знает о том, что переменные нужно определять явно. Прямо противоположное мнение может быть у тех, чей статус, в свою очередь, прямо противоположен "профессиональному".

Нет особого смысла. Коллекция тоже вполне работоспособна, пока не выполнится скрипт, коллекция будет считаться статичной.

Любому программисту, работающему с DOM API, хорошо известна разница между rows property и методом getElementsByTagName. Утверждение, что разницы между ними не существует, - это первый признак отсутствия компетентности.

s0rr0w · January 22, 2008

1. Алгоритм создания и идентификации именованной функции описан в ECMAScript Language Specification. Не пытаясь описать своими словами вариант, который Вы считаете идентичным, просто укажите раздел спецификации, описывающий этот "нормальный" вариант.
2. Известно ли Вам мнение разработчиков JavaScript 2.0 насчет подобного синтаксиса, и будет ли подобный код поддерживаться на платформах будущего?

1. Читаем раздел 10.1.1

2. Ссылки на список разработчиков и на мнение данных разработчиков.

Любой профессиональный программист знает о том, что переменные нужно определять явно. Прямо противоположное мнение может быть у тех, чей статус, в свою очередь, прямо противоположен "профессиональному".

Окей, вопрос профессиональному разработчику, в какую chain scope попадут нижеследущие переменные

<script type="text/javascript">
var x = 1;
y = 1;
</script>

Любому программисту, работающему с DOM API, хорошо известна разница между rows property и методом getElementsByTagName. Утверждение, что разницы между ними не существует, - это первый признак отсутствия компетентности.

Чем кардинально отличается HTMLCollection интерфейс от NodeList интерфейса? Почему нужно брать именно HTMLCollection интерфейс для поиска нод внутри таблицы?

Может для начала стоит все же почитать спецификацию?

AKS · January 23, 2008

1. Читаем раздел 10.1.1

В разделе 10.1.1 есть определение типов Function objects, в нем нет описания алгоритма создания и идентификации такой функции:

zebra = function () {};. Вы или слепы, или глупы.

2. Ссылки на список разработчиков и на мнение данных разработчиков.

Ссылки???

в какую chain scope попадут нижеследущие переменные

Что такое chain scope??? В ECMAScript Language Specification нет ни одного упоминания о таком определении. Вы совершенно не понимаете то, о чем пишите!

Чем кардинально отличается HTMLCollection интерфейс от NodeList интерфейса?

Чем кардинально отличается HTMLCollection интерфейс от NodeList интерфейса? Вы "смотрите в книгу, а видите фигу"! Речь шла о разнице между rows property и методом getElementsByTagName!

Почему нужно брать именно HTMLCollection интерфейс для поиска нод внутри таблицы?

Я не собираюсь Вам ничего объяснять, т.к. мне хорошо известно, что это бесполезная трата времени!

Что ж, я ставил цель ликвидировать неоднозначность в оценке фрагмента кода. Цель достигнута. Вы в очередной раз обнаружили полную несостоятельность в вопросах, касающихся javascript. Следовательно, любому понятно, что ваши замечания следует игнорировать целиком и полностью. Более того, при ближайшем изучении вашей писанины будет ясно, что она, кроме того, что бесполезна, еще и крайне вредна для тех, кто встал на тернистый путь изучения javascript. К счастью для них, Вы тут же показали, что в этой области Вы сами являетесь дилетантом!

s0rr0w · January 23, 2008

В разделе 10.1.1 есть определение типов Function objects, в нем нет описания алгоритма создания и идентификации такой функции:
zebra = function () {};. Вы или слепы, или глупы.

Смелое заявление! Но весьма опрометчивое.

Итак, читаем, что же написано в пункте 10.1.1 на странице 37 документа http://www.ecma-international.org/publicat...ST/Ecma-262.pdf

Program functions are defined in source text by a FunctionDeclaration or created dynamically either

by using a FunctionExpression or by using the built-in Function object as a constructor.

Теперь идем на страницу 44 и изучаем Left-Hand-Side Expressions 11.2.5 Function Expressions

Потом идем на страницу 71 и читаем, чем отличается FunctionExpression от FunctionDeclaration.

Желательно вам пояснить мне, чем же эти два варианта отличаются, так как знающим спецификации у нас являетесь вы.

Ссылки???

Если бы разработчики хотели отказаться в будущих релизах от декларации фукнций через присвоение, то скорее всего была бы пометка deprecated уже в текущем документе. Увы, но в документе я этого не обнаружил.

Что такое chain scope??? В ECMAScript Language Specification нет ни одного упоминания о таком определении. Вы совершенно не понимаете то, о чем пишите!

Ах, прошу прощения, ошибся в порядке следования слов, нужно scope chain. 10.1.4 пункт той же спецификации.

По русски это звучит как "область видимости".

Я так понял, что мой вопрос успешно проигнорирован был.

Чем кардинально отличается HTMLCollection интерфейс от NodeList интерфейса? Вы "смотрите в книгу, а видите фигу"! Речь шла о разнице между rows property и методом getElementsByTagName!

Похоже вы все же невнимательно читаете спецификации. Результатом работы метода getElementsByTagName является NodeList.

Итак, читаем, что же есть NodeList Interface

The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live.

Теперь читаем, что же есть HTMLCollection

An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes.

Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.

Так вот, rows представляет собой HTMLCollection. Не кажутся ли странными первые два предложения у обоих описаниях. Коллекцию называют списком нод, а список - коллекцией нод?

Описание значения rows

rows of type HTMLCollection, readonly

Returns a collection of all the rows in the table, including all in THEAD, TFOOT, all TBODY elements.

Я не собираюсь Вам ничего объяснять

А вам бы стоило постараться. Ничто не красит человека так, как адекватная аргументация в споре.

AKS · January 23, 2008

Ничто не красит человека так, как адекватная аргументация в споре.

Заявления об "адекватной аргументации" от человека, который ведет беседу в таком ключе:

Вопрос:
- Известно ли Вам мнение разработчиков JavaScript 2.0 насчет подобного синтаксиса, и будет ли подобный код поддерживаться на платформах будущего?
Ответ:
- Ссылки на список разработчиков и на мнение данных разработчиков.

это не более, чем вздор.

Итак, читаем, что же написано в пункте 10.1.1 на странице 37 документа...
Теперь идем на страницу 44 и изучаем Left-Hand-Side Expressions 11.2.5 Function Expressions
Потом идем на страницу 71 и читаем, чем отличается FunctionExpression от FunctionDeclaration.

Как всегда, Вы пытаетесь увести разговор в иное русло для того, чтобы скрыть отсутствие знаний. Это бесполезно, т.к. Вы уже показали то, насколько слабы ваши представления о предмете обсуждения. Более того, Вы продолжаете это демонстрировать, не понимая то, о чем идет речь. Повторю еще раз ? речь шла об определении и идентификации функций. В данном контексте все ваши блуждания по Ecma-262.pdf совершенно бесцельны.

отказаться в будущих релизах от декларации фукнций через присвоение...

Нет и не будет в ECMAScript Language Specification такого понятия, как "декларация функций через присвоение"! Это плод вашего отвлеченного воображения. Хватит писать всякую чушь!

Ах, прошу прощения, ошибся в порядке следования слов, нужно scope chain. 10.1.4 пункт той же спецификации.

Это не ошибка в порядке следования ? это полное отсутствие связи между вашим сознанием и тем, что и как происходит в ECMAScript Language.

Похоже вы все же невнимательно читаете спецификации.

А Вы не то, чтобы невнимательно читаете, Вы даже не способны понять то, о чем идет разговор! Дело не в том, что возвращает свойство или метод, дело в алгоритме работы. Но это не удивительно ? Вам об алгоритмах выполнения кода ничего не известно. Поэтому Вы, как обычно, пытаетесь "увильнуть".

Итак, читаем, что же есть NodeList Interface...
Теперь читаем, что же есть HTMLCollection

Читайте, сколько угодно ? от этого не будет никакого толку, т.к. это чтиво не имеет к моему вопросу ни малейшего отношения.

Как я уже писал ранее, беседа с вами ? это совершенно бесполезное занятие. Вы по-прежнему демонстрируете отсутствие понимания и навыков программирования на языке javascript. А поскольку я добился своей цели (см. выше), то я умываю руки.

WingedFox · January 23, 2008

Нет особой разницы. Оба варианта нормальные.

Разница есть, если воспользоваться этой функцией в том же файле, где она определяется. В варианте Влада вывов е? до фактического определения невозможен, т.к. происходит создание в момент выполнения оператора присваивания.

Проверьте:

alert([a,'===',b].join("n"));
function a () {};
var b = function () {};

Нет особого смысла. Коллекция тоже вполне работоспособна, пока не выполнится скрипт, коллекция будет считаться статичной.

Она хороша тем, что

а) сразу готова к использованию и не требует доп. вычислений в отличие от getElementsByTagName

б) туда не попадут строки из вложенных таблиц, буде такие появятся

s0rr0w · January 23, 2008

Разница есть, если воспользоваться этой функцией в том же файле, где она определяется. В варианте Влада вывов е? до фактического определения невозможен, т.к. происходит создание в момент выполнения оператора присваивания.

Теоретизировать конечно хорошо, но в контексте данной задачи, особой разницы нет.

Да и если уж вдаваться в подробности, то я лично считаю, что вызов функции раньше ее определения - сомнительная практика. Во многих языках порядок следования функций очень важен, и нельзя вызывать функцию до ее определения.

Она хороша тем, что
а) сразу готова к использованию и не требует доп. вычислений в отличие от getElementsByTagName
б) туда не попадут строки из вложенных таблиц, буде такие появятся

Вот, это уже больше похоже на адекватную аргументацию.

Итак, в текущем контексте, с тем вариантом таблицы, что предоставил Влад, разница будет только в скорости вычисления, и это верное замечание.

Касательно варианта "б" скажу так, если возникает задача сделать действительно универсальный скрипт раскраски, то rows может совсем не помочь

Раскрашиваться могут разные секции таблицы, не все строки из одной таблицы, вложенные строки вложенных таблиц, не только двойным чередованием, но и с более сложной логикой, например клетчатые таблицы.

И вот при такой постановке задачи rows, даже при всех плюсах, минусом может оказаться сложность кода для восприятия, который будет все это обрабатывать.

Я поднял свой первый скрипт раскраски таблиц. В нем использовался вариант с rows. В последней моей задаче это не использовалось, так как не было четкой идентификации что именно эта строка может участвовать в раскрашивании. Так как строки мигрировали по траблице между разными секциями, внутри одной секции, менялся признак необходимости раскрашивания при подключении различных модулей, то сделать однозначный вариант кроме как плоской выборки строк с последующими обработками, не представлялось реальным.

s0rr0w · January 23, 2008

AKS, ответьте мне на один вопрос

Чем отличается FunctionDeclaration от FunctionExpression?

Покажите ваши познания ECMAScript'а

AKS · January 23, 2008

Чем отличается FunctionDeclaration от FunctionExpression?
Покажите ваши познания ECMAScript'а smile

Вам я ничего показывать не буду - в этом нет никакого смысла. Тем более, что Вы до сих пор не вникли в суть моего вопроса. Если Вас действительно интересуют отличия FunctionDeclaration от FunctionExpression, которые не имеют к данной теме никакого отношения, то можете самостоятельно прочесть разъяснения Zeroglif'а по этому поводу (учиться никогда не поздно).

А смысла я не вижу (выше выделил специально), т.к. Вы не способны вести контруктивный разговор. Вы неоднократно доказали это раньше, показываете это и сейчас.

При этом Вы еще настолько невнимательны, что остается только пожимать плечами:

Итак, в текущем контексте, с тем вариантом таблицы, что предоставил Влад...

Вы действительно хорошо знакомы с "текущим контекстом", чтобы возражать WingedFox'у?

// Получаем массив всех строк в нужной таблице
tr = document.getElementsByTagName("tr");
 ^^^^^^^^

...

partiz · January 25, 2008

)) столько букв )))

интересно, всеже, кто же победит в споре )))

Dimitry Wolotko · January 25, 2008

Никто - уже проходили.

s0rr0w · January 30, 2008

В разделе 10.1.1 есть определение типов Function objects, в нем нет описания алгоритма создания и идентификации такой функции:
zebra = function () {};. Вы или слепы, или глупы.

Я нашел время, заглянул в спеку, и сейчас расскажу вам, как происходит создание функции zebra = function () {};

1. Для интерпретатора эта строка - выражение. Если бы было var, то это быда бы декларация переменной.

2. Выражение является простым присваиванием Simple Assignment ( = )

3. Вычисляется LeftHandSideExpression. Это PrimaryExpression. Результатом будет ссылка на объект null, чье свойство name будет равно идентификатору.

4. Вычисляется AssignmentExpression, что будет в нашем случае FunctionExpression. Интерпретатор создаст экземпляр класса Function.

5. Вызовется GetValue от 4-го пункта

6. Присвоится значение 3му пункту результат выполнения пятого

7. Будет возвращен результат выполнения выражения.

Да, выполнение выражения будет после создания функций через FunctionDeclaration.

Я ответил на этот вопрос?

s0rr0w · January 30, 2008

Вы действительно хорошо знакомы с "текущим контекстом", чтобы возражать WingedFox'у?
...

Недосмотрел, каюсь

Sign In

Чередующиеся строки в таблице

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

57 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information